<template>
  <div>
    <div>学生管理页面</div>
    <p></p>
    <button v-on:click="getAllStudents">获取所有用户</button>
    <div v-for="student in students" v-bind:key="student.id">
      {{student}}
    </div>
    <p></p>
    <div>
      请输入查询学生的id：
      <input v-model="queryId">
    </div>
    <button v-on:click="getStudentById">根据Id获取指定学生信息</button>
    <div>{{student}}</div>
    <p></p>
    <div>
      请输入要添加的学生信息
      <div>
        姓名：
        <input v-model="name">
      </div>
      <div>
        学号：
        <input v-model="studentId">
      </div>
      <div>
        班级：
        <input v-model="classs">
      </div>
      <div>
        电话号码：
        <input v-model="telephone">
      </div>
      <div>
        qq：
        <input v-model="qq">
      </div>
    </div>
    <button v-on:click="addStudent">添加学生</button>
    <p></p>
    <div>
      请输入要修改的用户信息:
      <div>
        id:
        <input v-model="updateId">
      </div>
      <div>
        学号:
        <input v-model="updateStudentId">
      </div>
      <div>
        姓名：
        <input v-model="updateStudentname">
      </div>
      <div>
        班级：
        <input v-model="updateClasss">
      </div>
      <div>
        电话：
        <input v-model="updateTelephone">
      </div>
      <div>
        qq：
        <input v-model="updateQq">
      </div>
    </div>
    <button v-on:click="updateStudent">修改学生</button>
    <p></p>
    <div>
      请输入要删除的学生信息：
      <div>
        id:
        <input v-model="deleteId">
      </div>
      <div>
        <button v-on:click="deleteStudent">删除学生</button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name:"Student",
  data(){
    return{
      students:null,
      queryId:null,
      student:null,
      name:null,
      studentId:null,
      classs:null,
      telephone:null,
      qq:null,
      updateId:null,
      updateStudentId:null,
      updateStudentname:null,
      updateClasss:null,
      updateTelephone:null,
      updateQq:null,
      deleteId:null
    }
  },
  methods:{
    getAllStudents(){
      axios.get("http://localhost:8081/students")
          .then(resp=>
              {
                console.log(resp);
                this.users=resp.data
              }
          )
    },
    getStudentById(){
      axios.get(`http://localhost:8081/student/${this.queryId}`)
          .then(resp=>{
            console.log(resp)
            this.user=resp.data
          })
    },
    addStudent(){
      axios.post("http://localhost:8081/student",{
        name:this.name,
        studentId:this.studentId,
        classs:this.classs,
        telephone:this.telephone,
        qq:this.qq
      }).then(resp=>{
        console.log(resp);
      })
    },
    updateStudent(){
      axios.put("http://localhost:8081/student",{
        id:this.updateId,
        name:this.updateStudentname,
        studentId:this.updateStudentId,
        classs:this.updateClasss,
        telephone:this.updateTelephone,
        qq:this.updateQq
      }).then(resp=>{
        console.log(resp)
      })
    },
    deleteStudent(){
      axios.delete("http://localhost:8081/student",{
        id:this.deleteId,
      }).then(resp=>{
        console.log(resp)
      })
    }
  }
}
</script>

<style scoped>

</style>